import React from 'react'
import { PieChart } from 'components/Charts'
import style from './pieCard.scss'

const PieCard = ({ used, total, title }) => {
  const colors = {
    color: used / total > 0.75 ? 'red' : '#329dce',
  }
  return (
    <div className={style.content}>
      <div className={style.chart}>
        <PieChart
          width={48}
          height={48}
          dataKey="value"
          data={[
            {
              name: '1',
              itemStyle: {
                fill: used / total > 0.75 ? 'red' : '#329dce',
              },
              value: used,
            },
            {
              name: '2',
              itemStyle: {
                fill: '#CCCCCC',
              },
              value: total - used,
            },
          ]}
        />
      </div>

      <div className={style.middle}>
        <p>{title}</p>
        <p>
          <span style={{ fontSize: '16px' }}>{used}</span>/{total}
        </p>
      </div>
      <div className={style.status}>
        {used / total > 0.7 ? (
          <span style={colors}>超负荷</span>
        ) : (
          <span style={colors}>正常</span>
        )}
      </div>
    </div>
  )
}

export default PieCard
